<template>
  <div v-loading.fullscreen.lock="loading"  element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="header">
      <el-row :gutter="20">
        <el-col :span="3">
          <el-input size="mini" placeholder="作者名" v-model="getListData.fuzzyInfo"></el-input>
        </el-col>
        <el-col :span="3">
          <el-input size="mini" placeholder="书籍名" v-model="getListData.name"></el-input>
        </el-col>
        <el-col :span="3">
            <el-select v-model="getListData.check" size="mini" clearable  placeholder="小说状态">
              <el-option
                v-for="item in searhFormData.stateOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id">
              </el-option>
            </el-select>
        </el-col>
        <el-col :span="8">
            <el-button-group>
              <el-button size="mini"  @click="search">查询</el-button>
              <el-button size="mini"  @click="showAdd" type="primary">新增</el-button>
            </el-button-group>
        </el-col>
      </el-row>
    </div>
    <div class="list">
          <el-table stripe :data="dataSource" >
            <el-table-column prop="bookId" label="ID" ></el-table-column>
            <el-table-column prop="bookName" label="书籍名称" ></el-table-column>
            <el-table-column prop="authorName" label="作者" ></el-table-column>
            <el-table-column prop="checkName" label="小说状态" ></el-table-column>
            <el-table-column prop="checkInfo" label="审核原因" ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button  type="default" icon="el-icon-edit"  @click="showFirstChapter(scope.row)" size="mini" :disabled="!scope.row.firstChapterId">查看首章</el-button>
                  <el-button  type="default" icon="el-icon-edit"  @click="showCheck(scope.row)" size="mini">审核</el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
    </div>
    <el-dialog  v-if="firstContent" :title="firstContent.bookName"
      :visible.sync="dialog.firstChapterBox"
      width="800px"     
      :close-on-click-modal="false">
        <div>
          <h3 style="text-align:center;">{{firstContent.name}}</h3>
          <p style="text-align:center;">{{firstContent.uploadDate|timeTrans}}</p>
          <p>{{firstContent.content}}</p>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeFirstChapterBox()"  size="mini">关闭</el-button>
        </div>
      </el-dialog>
      <el-dialog title="审核"
      :visible.sync="dialog.showCheck"
      width="500px"     
       @close="closeAddRules('checkForm')"
      :close-on-click-modal="false">
        <el-form :model="checkForm" status-icon  :rules="rules" ref="checkForm">
          <el-form-item label="审核结果" label-width="80px"  prop="check">
              <el-select filterable clearable v-model="checkForm.check" size="mini" placeholder="请选择审核结果">
                <el-option
                  v-for="item in searhFormData.checkResult"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="审核原因" label-width="80px" prop="bookCustominfo1">
            <el-input size="mini"
              type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                v-model="checkForm.bookCustominfo1">
              </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeCheckBox()"  size="mini">取消</el-button>
          <el-button @click="saveCheck('checkForm')"  size="mini">确认</el-button>
        </div>
      </el-dialog>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="paginationData.currentPage"
      :background="true"
      :page-sizes="paginationData.pageSizes"
      :page-size="paginationData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="paginationData.total">
    </el-pagination>     
  </div>
</template>

<script>
import bookController from '@/api/bookController/index'
  export default {
    name:'label',
    data(){
      return {
        searhFormData:{
          stateOptions:[
            {id:0,text:'无首章信息'},
            {id:1,text:'系统审核未通过'},
            {id:2,text:'待审核'},
            {id:3,text:'审核未通过'},
            {id:4,text:'审核通过'},
            {id:5,text:'完结'}
          ],
          checkResult:[
            {id:3,text:'审核未通过'},
            {id:4,text:'审核通过'}
          ]
        },
        loading:false,
        firstContent:null,
        getListData:{
          check:2,
          name:null,
          fuzzyInfo:null,
          pageSize:10,
          pageNum:1
        },
        paginationData:{
          currentPage:1,
          pageSizes:[10,20,30],
          pageSize:10,
          total:0
        },
        dataSource:[],
        addForm:{
          name:null,
          descibe:null,
          status:0
        },
         updateForm:{
          id:null,
          name:null,
          descibe:null
        },
        rules:{
          name:[
            {required:true,message:'请输入标签名',trigger:'blur'}
          ],
          descibe:[
            {required:true,message:'请输入描述',trigger:'blur'}
          ],
          check:[
            {required:true,message:'请选择审核结果',trigger:'blur'}
          ],
          bookCustominfo1:[
            {required:true,message:'请输入审核原因',trigger:'blur'}
          ]
        },
        checkForm:{
          id:null,
          check:null,
          bookCustominfo1:null //审核原因
        },
        dialog:{
          firstChapterBox:false,
          showCheck:false,
          updateBox:false
        }
      }
    },
    filters:{
      status:function(value){
        var res = value==0?'启用':'禁用';
        return res;
      }
    },
    created(){
      this.getList();
    },
    filters:{
      timeTrans:function(data){
        var date = new Date(data);
        var Y,M,D,h,m,s;
          Y = date.getFullYear() + '-';
          M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
          D = date.getDate() + ' ';
          h = date.getHours() + ':';
          m = date.getMinutes() + ':';
          s = date.getSeconds(); 
        return Y+M+D+h+m+s
      }
    },
    methods:{
      search(){
        this.getList();
      },
      showAdd(){
        this.dialog.addBox = true;
      },
      getList(){
        var formData =  this.getListData;
        this.loading = true;
        bookController.getList(formData).then(response=>{
          this.paginationData.total=response.data.total;
          this.dataSource = response.data.list;
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
      },
      showFirstChapter(data){
        if(!data.firstChapterId){

          return false
        }
        this.dialog.firstChapterBox = true;
        //获取首章节信息
        this.loading = true;
        bookController.getChapterInfoById({id:data.firstChapterId}).then(response=>{
          this.firstContent = response.data
          this.loading = false;
        }).catch(()=>{
          this.loading = false;
        })
      },
      closeFirstChapterBox(){
        this.dialog.firstChapterBox = false;
      },
      closeAddRules(rulesForm){
        this.$refs[rulesForm].resetFields();
      },
      showCheck(data){
        this.checkForm.id = data.bookId;        
        this.dialog.showCheck = true;
      },
      closeCheckBox(){
        this.dialog.showCheck = false;
      },
      saveCheck(rulesForm){
        this.$refs[rulesForm].validate((valid) => {
          if(valid){
             this.loading = true;
            bookController.checkNovel(this.checkForm).then(response=>{
               this.loading = false;
               if(response.success){
                 this.dialog.showCheck = false;
                 this.getList();
               }
            }).catch(()=>{
              this.loading = false;
            })
          }
        })
         
      },
      handleSizeChange(val) { // 修改每页显示条数 需要发送请求
        this.paginationData.pageSize=val;
        this.getListData.pageSize=val;
        this.getList();//重新获取当前页数据
      },
      handleCurrentChange(val) { // 修改当前页 需要发送请求
        this.paginationData.currentPage=val;
        this.getListData.pageNum=val;
        this.getList();//重新获取当前页数据
      }          
    }
  }
</script>

<style scoped>
.header{
  margin-top: 20px;
}
.list{
  margin-top: 20px;
}
</style>
